var cluster;
var colors = [
	"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
	"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
	"#651067", "#329262", "#5574a6", "#3b3eac"
];

var map = new AMap.Map("container", {
	resizeEnable: true,
	center: [105, 34],
	zoom: 5,
	mapStyle: "amap://styles/fresh",
});

AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function (DistrictExplorer, $) {
	var districtExplorer = window.districtExplorer = new DistrictExplorer({
		eventSupport: true, //打开事件支持
		map: map
	});
	var currentAreaNode = null;
	function toggleHoverFeature(feature, isHover, position) {

		// tipMarker.setMap(isHover ? map : null);

		if (!feature) {
			return;
		}

		var props = feature.properties;



		//更新相关多边形的样式
		var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
		for (var i = 0, len = polys.length; i < len; i++) {

			polys[i].setOptions({
				fillOpacity: isHover ? 0.5 : 0.2
			});
		}
	}
	districtExplorer.on('featureMouseout featureMouseover', function (e, feature) {
		toggleHoverFeature(feature, e.type === 'featureMouseover',
			e.originalEvent ? e.originalEvent.lnglat : null);
	});

	//feature被点击
	districtExplorer.on('featureClick', function (e, feature) {

		var props = feature.properties;
		//如果存在子节点
		// if (props.childrenNum > 0) {
		//切换聚焦区域
		switch2AreaNode(props.adcode);
		// }
	});

	//外部区域被点击
	districtExplorer.on('outsideClick', function (e) {

		districtExplorer.locatePosition(e.originalEvent.lnglat, function (error, routeFeatures) {

			if (routeFeatures && routeFeatures.length > 1) {
				//切换到省级区域
				switch2AreaNode(routeFeatures[1].properties.adcode);
			} else {
				//切换到全国
				switch2AreaNode(100000);
			}

		}, {
			levelLimit: 2
		});
	});

	function renderAreaPolygons(areaNode) {
		//更新地图视野
		map.setBounds(areaNode.getBounds(), null, null, true);

		//清除已有的绘制内容
		districtExplorer.clearFeaturePolygons();

		//绘制子区域
		districtExplorer.renderSubFeatures(areaNode, function (feature, i) {

			var fillColor = colors[i % colors.length];
			var strokeColor = colors[colors.length - 1 - i % colors.length];

			return {
				cursor: 'default',
				bubble: true,
				strokeColor: strokeColor, //线颜色
				strokeOpacity: 1, //线透明度
				strokeWeight: 1, //线宽
				fillColor: fillColor, //填充色
				fillOpacity: 0.35, //填充透明度
			};
		});

		//绘制父区域
		districtExplorer.renderParentFeature(areaNode, {
			cursor: 'default',
			bubble: true,
			strokeColor: 'black', //线颜色
			strokeOpacity: 1, //线透明度
			strokeWeight: 1, //线宽
			fillColor: areaNode.getSubFeatures().length ? null : colors[0], //填充色
			fillOpacity: 0.35, //填充透明度
		});
	}

	//切换区域后刷新显示内容
	function refreshAreaNode(areaNode) {

		districtExplorer.setHoverFeature(null);

		renderAreaPolygons(areaNode);

	}

	//切换区域
	function switch2AreaNode(adcode, callback) {

		if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
			return;
		}

		loadAreaNode(adcode, function (error, areaNode) {

			if (error) {

				if (callback) {
					callback(error);
				}

				return;
			}

			currentAreaNode = window.currentAreaNode = areaNode;

			//设置当前使用的定位用节点
			districtExplorer.setAreaNodesForLocating([currentAreaNode]);

			refreshAreaNode(areaNode);

			if (callback) {
				callback(null, areaNode);
			}
		});
	}

	//加载区域
	function loadAreaNode(adcode, callback) {

		districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

			if (error) {

				if (callback) {
					callback(error);
				}

				console.error(error);

				return;
			}

			if (callback) {
				callback(null, areaNode);
			}
		});
	}

	//全国
	switch2AreaNode(100000);
});

function draw(points) {
	if (cluster) cluster.clearMarkers();
	var markers = [];
	for (var i = 0; i < points.length; i += 1) {
		markers.push(new AMap.Marker({
			position: points[i],
			content: '<div style="background-color: hsla(180, 100%, 50%, 1); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
			offset: new AMap.Pixel(-15, -15)
		}))
	}

	var count = markers.length;
	var _renderClusterMarker = function (context) {
		var factor = Math.pow(context.count / count, 1 / 18);
		var div = document.createElement('div');
		var Hue = 180 - factor * 180;
		var bgColor = 'hsla(' + Hue + ',100%,50%,1)';
		var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
		var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
		div.style.backgroundColor = bgColor;
		var size = Math.round(15 + Math.pow(context.count / count, 1 / 5) * 20);
		div.style.width = div.style.height = size + 'px';
		div.style.border = 'solid 1px ' + borderColor;
		// div.style.borderRadius = size / 2 + 'px';
		div.style.boxShadow = '0 0 1px ' + shadowColor;
		div.innerHTML = context.count;
		div.style.lineHeight = size + 'px';
		div.style.color = 'white';
		div.style.fontSize = '14px';
		div.style.textAlign = 'center';
		context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
		context.marker.setContent(div)
	};
	cluster = new AMap.MarkerClusterer(map, markers, {
		gridSize: 80,
		renderClusterMarker: _renderClusterMarker
	});
}